<template>
  <div class="box">
    <el-dialog
      draggable
      width="360"
      align-center
      :show-close="false"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="flex_column_center">
        <img
          class="icon"
          :src="`${ossURlZjk}/dms/admin/${
            isNormal ? 'success' : 'warning'
          }.png`"
          alt=""
        />
        <p class="leve_title">{{ isNormal ? '提交成功' : '订单待付款' }}</p>
        <span class="text" v-if="isNormal">
          您的采购订单已提交成功，卖方会在24小时内接单进行处理，详情可在
          <span>
            <!-- class="link" @click="router.push('/procure/orderTrack')" -->
            【订单跟踪】
          </span>
          页面进行查看。
        </span>
        <span class="text" v-if="!isNormal">
          您的订单已提交成功,请及时付款以免影响后续的订单发货。
        </span>
        <el-button size="small" type="primary" @click="close">
          {{ isNormal ? '确定' : '知道了' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ossURlZjk } from '~/src/config'

  const router = useRouter()

  // /procure/orderTrack
  const dialogVisible = ref(false)
  // 信用是否成功
  const isNormal = ref(false)
  // 打开
  const open = (v: boolean) => {
    dialogVisible.value = true
    isNormal.value = v
  }
  // 关闭
  const close = () => {
    dialogVisible.value = false
    router.push('/procure/check')
  }

  defineExpose({
    open,
  })
</script>
<style scoped lang="scss">
  .dialog-footer button:first-child {
    margin-right: 10px;
  }

  .icon {
    display: block;
    width: 60px;
    height: 60px;
  }
  .title {
    font-size: 14px;
  }

  .text {
    display: inline-block;
    margin-bottom: 16px;
  }
  .box {
    :deep() {
      .el-dialog.is-draggable .el-dialog__header {
        display: none;
      }
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 30px;
      }
    }
  }

  .leve_title {
    margin-right: 0px;
  }
</style>
